<template>
  <div class="comment-container">
    <div class="comment-card">
      <div class="comment-header">
        <h3 class="comment-title">评论 <span class="comment-count">{{ count }}</span></h3>
      </div>
      <yk-scrollbar ref="scrollbar" :height="scrollHeight" class="comment-scrollbar">
        <div class="comment-list">
          <replyView v-for="item in comments" :key="item.id" :content="item" @delete="deleteComment" :isComment="true"
            @isread="changeRead" class="comment-item">
          </replyView>

          <div v-if="comments && !comments.length" class="comment-empty">
            <p>暂无评论，来添加第一条评论吧！</p>
          </div>
        </div>
      </yk-scrollbar>
      <div class="comment-pagination">
        <yk-pagination size="m" :total="count" @change="changePage" :default-page-size="props.pageSize" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, getCurrentInstance } from 'vue'
import type { CommentProps } from './type';
import replyView from './replyView.vue';
import { commentAPI, commentIsreadAPI, deleteCommentAPI } from '@/api';
import { useUserStore } from '@/stores/user';
import { useCode } from '@/hooks/code';

const userStore = useUserStore()
const { tackleCode } = useCode()
const proxy: any = getCurrentInstance()?.proxy

const props = withDefaults(defineProps<CommentProps>(), {
  pageSize: 4,
  height: '650px'
})

// 动态计算滚动区域高度
const scrollHeight = computed(() => {
  // 在移动设备上使用较小的高度
  if (window.innerWidth <= 768) {
    return '450px';
  }
  return props.height;
});

// 总数
const count = ref<number>(0)

// 数据内容
const comments = ref()

// 请求
type Request = {
  token?: string,
  pageSize: number,
  nowPage: number,
  count?: boolean
}

const request: Request = {
  pageSize: props.pageSize,
  nowPage: 1,
  token: userStore.token
}

// 获取数据
const getCommentData = async (e: boolean) => {
  request.count = e
  const res: any = await commentAPI(request)
  if (tackleCode(res.code)) {
    if (res.data.count !== -1) {
      count.value = res.data.count
    }
    comments.value = res.data.result
  }
}

// 分页查询
const changePage = (e: number) => {
  request.nowPage = e
  getCommentData(false)
}

// 已读
const changeRead = async (e: number) => {
  const request = {
    token: userStore.token,
    id: e
  }
  const res: any = await commentIsreadAPI(request)
  if (tackleCode(res.code)) {
    // 处理前端的已读
    for (let i = 0; i < comments.value.length; i++) {
      if (comments.value[i].id === e) {
        comments.value[i].isread = 1
      }
    }
  }
}

// 删除评论
const deleteComment = async (e: number) => {
  const request = {
    token: userStore.token,
    id: e
  }
  const res: any = await deleteCommentAPI(request)
  if (tackleCode(res.code)) {
    comments.value = comments.value.filter((item: any) => item.id !== e)
    proxy.$message({
      type: 'primary',
      message: '删除成功'
    })
  } else {
    proxy.$message({
      type: 'danger',
      message: res.msg || '删除失败'
    })
  }
}

onMounted(() => {
  getCommentData(true)
})
</script>

<style lang="less" scoped>
// 颜色变量
@primary-color: #3a7bd5;
@primary-light: #5a93e1;
@text-color: #2c3e50;
@text-secondary: #5e6c84;
@text-muted: #8492a6;
@border-color: #edf0f5;
@bg-color: #ffffff;
@bg-light: #f8fafc;
@shadow-color: rgba(0, 0, 0, 0.06);

// 动画变量
@transition-time: 0.3s;
@transition-curve: cubic-bezier(0.25, 1, 0.5, 1);

.comment-container {
  width: 100%;
  margin-bottom: 24px;
  height: 100%;
}

.comment-card {
  background-color: @bg-color;
  border-radius: 16px;
  box-shadow: 0 8px 24px @shadow-color;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid @border-color;
  height: 100%;
  transition: box-shadow @transition-time @transition-curve, transform @transition-time @transition-curve;

  &:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }
}

.comment-header {
  padding: 20px 24px;
  border-bottom: 1px solid @border-color;
  background: linear-gradient(to right, rgba(246, 249, 255, 0.9), rgba(250, 252, 255, 0.7));
  position: relative;
  z-index: 1;

  &::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(to right, @primary-color, rgba(58, 123, 213, 0.1));
    border-radius: 1px;
  }
}

.comment-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: @text-color;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 2px;
    bottom: 2px;
    width: 4px;
    background: linear-gradient(to bottom, @primary-color, @primary-light);
    border-radius: 0 2px 2px 0;
  }
}

.comment-count {
  background: linear-gradient(135deg, @primary-color, @primary-light);
  color: white;
  font-size: 14px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  box-shadow: 0 2px 8px rgba(58, 123, 213, 0.2);
}

.comment-scrollbar {
  flex: 1;
  padding: 0 24px;

  :deep(.yk-scrollbar__wrap) {
    padding-right: 0;
  }

  :deep(.yk-scrollbar__bar.is-vertical) {
    width: 4px;

    .yk-scrollbar__thumb {
      background-color: rgba(58, 123, 213, 0.2);
      border-radius: 2px;

      &:hover {
        background-color: rgba(58, 123, 213, 0.4);
      }
    }
  }
}

.comment-list {
  padding: 20px 0;
}

.comment-item {
  margin-bottom: 18px;
  transition: all @transition-time @transition-curve;
  border-radius: 12px;
  padding: 2px;

  &:last-child {
    margin-bottom: 0;
  }

  &:hover {
    transform: translateX(6px);
    background-color: rgba(237, 242, 250, 0.4);
    box-shadow: 0 2px 12px rgba(58, 123, 213, 0.04);
  }
}

.comment-empty {
  padding: 60px 0;
  text-align: center;
  color: @text-muted;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
  }

  &::before {
    content: '💬';
    font-size: 32px;
    opacity: 0.7;
  }
}

.comment-pagination {
  padding: 16px 24px;
  border-top: 1px solid @border-color;
  display: flex;
  justify-content: center;
  background-color: @bg-light;

  :deep(.yk-pagination) {
    .yk-pagination-item.is-active {
      background-color: @primary-color;
      border-color: @primary-color;
      box-shadow: 0 2px 6px rgba(58, 123, 213, 0.2);

      &:hover {
        background-color: @primary-light;
      }
    }

    .yk-pagination-item:not(.is-active):hover {
      color: @primary-color;
      border-color: @primary-color;
    }

    .yk-pagination-prev,
    .yk-pagination-next {
      &:hover {
        color: @primary-color;
        border-color: @primary-color;
      }
    }
  }
}

// 响应式设计
@media (min-width: 1400px) {
  .comment-scrollbar {
    padding: 0 28px;
  }

  .comment-list {
    padding: 24px 0;
  }
}

@media (max-width: 992px) {
  .comment-card {
    border-radius: 14px;
  }

  .comment-title {
    font-size: 17px;
  }
}

@media (max-width: 768px) {
  .comment-card {
    border-radius: 12px;
  }

  .comment-header {
    padding: 18px 20px;

    &::after {
      left: 16px;
      right: 16px;
    }
  }

  .comment-title {
    font-size: 16px;

    &::before {
      left: -20px;
      width: 3px;
    }
  }

  .comment-count {
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
  }

  .comment-scrollbar {
    padding: 0 20px;
  }

  .comment-list {
    padding: 16px 0;
  }

  .comment-empty {
    padding: 40px 0;

    &::before {
      font-size: 28px;
    }
  }

  .comment-pagination {
    padding: 14px 20px;
  }
}

@media (max-width: 480px) {
  .comment-card {
    border-radius: 10px;
    box-shadow: 0 6px 16px @shadow-color;
  }

  .comment-header {
    padding: 16px;

    &::after {
      left: 12px;
      right: 12px;
    }
  }

  .comment-title {
    font-size: 15px;

    &::before {
      left: -16px;
      width: 3px;
    }
  }

  .comment-count {
    font-size: 12px;
    padding: 2px 6px;
  }

  .comment-scrollbar {
    padding: 0 16px;
  }

  .comment-list {
    padding: 12px 0;
  }

  .comment-item:hover {
    transform: translateX(4px);
  }

  .comment-empty {
    padding: 30px 0;

    p {
      font-size: 14px;
    }

    &::before {
      font-size: 24px;
    }
  }

  .comment-pagination {
    padding: 12px 16px;

    :deep(.yk-pagination) {
      font-size: 13px;

      .yk-pagination-item,
      .yk-pagination-prev,
      .yk-pagination-next {
        min-width: 28px;
        height: 28px;
        line-height: 28px;
        margin: 0 2px;
      }
    }
  }
}

// 超小屏幕优化
@media (max-width: 360px) {
  .comment-card {
    border-radius: 8px;
  }

  .comment-header {
    padding: 14px 12px;
  }

  .comment-title {
    font-size: 14px;

    &::before {
      left: -12px;
      width: 2px;
    }
  }

  .comment-pagination {
    padding: 10px 12px;

    :deep(.yk-pagination) {
      font-size: 12px;

      .yk-pagination-item,
      .yk-pagination-prev,
      .yk-pagination-next {
        min-width: 26px;
        height: 26px;
        line-height: 26px;
        margin: 0 1px;
      }
    }
  }
}

// 添加优雅的滚动到顶部动画
:deep(.yk-scrollbar__wrap) {
  scroll-behavior: smooth;
}
</style>
